<template>
    <div class="pushRecord zy-content ">
        <!-- 搜索 -->
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('接收人员')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.receiveName" :placeholder="`${$t('common.inputInfo')}`"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t('推送时间') }}</p>
              <div class="ipt">
                <DatePicker type="daterange"
                            v-model="dateTimeRange"
                            :placeholder="$t('common.PleaseSelect')"
                            transfer-class-name="hide-handle-cancel"
                            placement="bottom"
                            transfer
                            :clearable="false"
                            >
                </DatePicker>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" type="primary" @click="changeNum()" v-has="'dmsPushRecordQueryPage'">{{$t('common.Query')}}</Button>
                <Button
                    class="reset-btn"
                    @click="resetSearch()"
                    v-has="'dmsPushRecordQueryPage'"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
         <div class="list-layout mt16">
           <!-- 批量删除 批量导出  批量导入 下载模板 新增-->
           <div class="btns clear">
             <span class="title">{{ $t('common.listInformation') }}</span>
           </div>
           <!-- 表格 -->
           <div class="tableContent">
            <Table ellipsis ref="selection" stripe  class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
                   :columns="columns"  :data="dataArr">
                <template slot-scope="{ row }" slot="enclosure">
                    <Icon type="ios-link" size="25" style="cursor:pointer" @click="enclosure(row)" v-if="row.files.length>0"/>
                </template>
            </Table>
           </div>
           <!-- 分页 -->
           <div class="pageWrap mt16">
             <pageLeftTitle :total="total"/>
             <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
                   @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
           </div>
         </div>
    </div>
</template>

<script>
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "pushRecord",
    components: {},
    mixins:[toggleTableOperation],
    data() {
        return {
            dateTimeRange: [
                this.$moment(new Date()).subtract(6, 'days').format('YYYY-MM-DD'),
                this.$moment(new Date()).format('YYYY-MM-DD')
            ],
            searchParams: {},
            pageNum: 1,
            pageSize: 10,
            total: 0,
            columns: [
                {
                    title: `${ this.$t('推送类型') }`,
                    key: 'pushType',
                    minWidth: 100,
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${ this.$t('推送时间') }`,
                    key: 'pushTime',
                    minWidth: 100,
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${ this.$t('推送内容') }`,
                    key: 'pushContent',
                    minWidth: 100,
                    tooltip:true,
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${ this.$t('附件') }`,
                    key: 'files',
                    slot: "enclosure",
                    minWidth: 100,
                    align: 'center',
                    resizable: true

                },
                {
                    title: `${ this.$t('接收人员') }`,
                    key: 'receiveName',
                    minWidth: 100,
                    align: 'center',
                    resizable: true
                },
            ],
            dataArr: [],
            pageSizeOption: [10, 20, 30, 40],
        }
    },
    created() {
        this.getColumnWidth(this.columns)
    },
    mounted() {

        this.changeNum();
    },
    methods: {
        enclosure(row) {
            if(row.files&&row.files.length>0){
                for(let item of row.files){
                    window.open(this.util.filePathToUrl(item.filePath))
                }
            }
        },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        resetSearch(){
            this.searchParams = {}
            this.dateTimeRange = [
                this.$moment(new Date()).subtract(6, 'days').format('YYYY-MM-DD'),
                this.$moment(new Date()).format('YYYY-MM-DD')
            ],
            this.changeNum()
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        //查询列表
        searchList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            for (let key in this.searchParams) {
                if (this.searchParams[key]) {
                    this.$set(params, key, this.searchParams[key])
                }
            }
            params.startTime = this.$moment(this.dateTimeRange[0]).format('YYYY-MM-DD 00:00:00'),
            params.endTime = this.$moment(this.dateTimeRange[1]).format('YYYY-MM-DD 23:59:59'),
            this.axios({
                method: 'post',
                url: '/dms/dmsPushRecord/queryPage',
                data: params
            }).then(res => {
                if (res.code === 200) {
                    String.prototype.replaceAll = function(f, e) { //吧f替换成e
                            const reg = new RegExp(f, "g"); //创建正则RegExp对象
                            return this.replace(reg, e);
                    }
                    this.dataArr = res.data.list.map(item => {
                        item.pushContent = item.pushContent.replaceAll('<br>', '\n')
                        item.pushContent = item.pushContent.replaceAll('<br/>', '\n')
                        return {...item,}
                    });
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
    }
}
</script>


